<template>
  <div class="full-box d-flex">
    <div class="flex-1 overflow-hidden">
      <BKChart :option="option1" />
    </div>
    <div class="flex-1 overflow-hidden">
      <BKChart :option="option2" />
    </div>
    <div class="flex-1 overflow-hidden">
      <BKChart :option="option3" />
    </div>
  </div>
</template>

<script>
import { getProcess } from '../utils/common-func'
export default {
  props: {
    detail: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      option1: {},
      option2: {},
      option3: {}
    }
  },
  watch: {
    detail: {
      handler () {
        if (this.detail) {
          this.handleData()
        }
      }
    }
  },
  methods: {
    handleData () {
      const map = new Map([
        ['qghjcz', '全国汇交测站'],
        ['cjlycz', '长江流域测站'],
        ['zgcz', '自管测站']
      ])
      if (this.detail?.masterDatastatistics) {
        const item = this.detail?.masterDatastatistics || {}
        let sum = 0
        for (const i in item) {
          if (map.get(i)) {
            sum += item[i] || 0
          }
        }
        console.log(sum, '1111')
        this.option1 = getProcess({ data: [{ name: '全国汇交测站', value: item.qghjcz ? ((item.qghjcz || 0) / sum) * 100 : 0 }], title: '全国汇交测站', sum: item.qghjcz || 0, color: '#3bafff' })
        this.option2 = getProcess({ data: [{ name: '长江流域测站', value: item.cjlycz ? ((item.cjlycz || 0) / sum) * 100 : 0 }], title: '长江流域测站', sum: item.cjlycz || 0, color: '#3feed4' })
        this.option3 = getProcess({ data: [{ name: '自管测站', value: item.zgcz ? ((item.zgcz || 0) / sum) * 100 : 0 }], title: '自管测站', sum: item.zgcz || 0, color: '#ff7f50' })
      }
    }
  }
}
</script>
